تنفيذ التلميحات: معلومات يمكن الوصول إليها عند التمرير والتركيز

التلميحات هي رسائل مساعدة سياقية صغيرة تظهر عندما يمرر المستخدم مؤشر الفأرة فوق عنصر ما أو يركز عليه. يمكنها تقديم معلومات إضافية، أو توضيح الغرض من عنصر ما، أو تقديم تلميحات حول كيفية استخدام ميزة معينة. ومع ذلك، يمكن أن تصبح التلميحات كوابيس لإمكانية الوصول بسهولة إذا لم يتم تنفيذها بشكل صحيح. يوضح هذا الدليل أفضل الممارسات لإنشاء تلميحات قابلة للاستخدام من قبل الجميع، بمن فيهم المستخدمون من ذوي الإعاقة.

لماذا تعد إمكانية الوصول مهمة للتلميحات

إمكانية الوصول لا تتعلق فقط بالامتثال؛ إنها تتعلق بإنشاء تجربة مستخدم أفضل للجميع. عندما لا تكون التلميحات متاحة للوصول، يمكن أن يؤدي ذلك إلى استبعاد المستخدمين الذين يعتمدون على التقنيات المساعدة مثل قارئات الشاشة، أو التنقل باستخدام لوحة المفاتيح، أو الإدخال الصوتي. ضع في اعتبارك هذه السيناريوهات:

• مستخدمو قارئات الشاشة: إذا لم يتم ترميز التلميح بشكل صحيح، فقد لا يعلن قارئ الشاشة عن وجوده أو محتواه.
• مستخدمو لوحة المفاتيح: إذا كان التلميح يظهر فقط عند التمرير، فلن يتمكن مستخدمو لوحة المفاتيح من الوصول إليه.
• المستخدمون الذين يعانون من إعاقات حركية: قد تكون حركات الفأرة الدقيقة المطلوبة لتفاعلات التمرير صعبة أو مستحيلة.
• المستخدمون الذين يعانون من إعاقات معرفية: يمكن أن يؤدي التلميح ذو التوقيت السيئ أو المربك إلى الإحباط وإعاقة الفهم.

باتباع أفضل ممارسات إمكانية الوصول، يمكننا ضمان أن التلميحات تعزز تجربة المستخدم للجميع بدلاً من إعاقتها.

المبادئ الأساسية للتلميحات التي يمكن الوصول إليها

المبادئ التالية حاسمة لإنشاء تلميحات يمكن الوصول إليها:

1. توفير وصول بديل: تأكد من أن التلميحات يمكن الوصول إليها عبر كل من التمرير والتركيز باستخدام لوحة المفاتيح.
2. استخدام سمات ARIA: استخدم سمات ARIA (تطبيقات الإنترنت الغنية التي يمكن الوصول إليها) لتحديد ووصف التلميحات بشكل صحيح للتقنيات المساعدة.
3. إدارة التركيز: تحكم في مكان انتقال التركيز عند عرض التلميح وإخفائه.
4. ضمان تباين كافٍ: وفر تباينًا لونيًا كافيًا بين نص التلميح والخلفية.
5. السماح بوقت كافٍ: امنح المستخدمين وقتًا كافيًا لقراءة محتوى التلميح.
6. جعلها قابلة للإغلاق: وفر طريقة واضحة لإغلاق التلميح.
7. تجنب الإفراط في الاستخدام: استخدم التلميحات باعتدال وفقط عند الضرورة.

تقنيات التنفيذ

1. استخدام التمرير والتركيز

الجانب الأكثر أهمية في التلميحات التي يمكن الوصول إليها هو ضمان إمكانية وصولها لكل من مستخدمي الفأرة ولوحة المفاتيح. هذا يعني أن التلميح يجب أن يظهر عند التمرير وعندما يتلقى العنصر التركيز.

HTML:

            <a href="#" aria-describedby="tooltip-example">Example Link</a>
<div id="tooltip-example" role="tooltip" style="display: none;">This is an example tooltip.</div>
            

              
                Copy
              
            
          

CSS:

            a:hover + div[role="tooltip"],
a:focus + div[role="tooltip"] {
  display: block;
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 1000; /* Ensure the tooltip is on top */
}

            

              
                Copy
              
            
          

الشرح:

• aria-describedby: تربط هذه السمة الرابط بعنصر التلميح باستخدام معرفه (ID). وهذا يخبر التقنيات المساعدة أن التلميح يوفر معلومات إضافية حول الرابط.
• role="tooltip": تحدد سمة ARIA هذه العنصر كتلميح.
• يستخدم CSS محدد الأخ المجاور (+) لإظهار التلميح عند التمرير فوق الرابط أو التركيز عليه.

JavaScript (تحكم متقدم - اختياري):

بينما يمكن لـ CSS التعامل مع الإظهار/الإخفاء البسيط، يسمح JavaScript بتحكم أكثر قوة، خاصة عندما يتم إنشاء التلميحات ديناميكيًا أو تحتاج إلى سلوك أكثر تعقيدًا.

            const link = document.querySelector('a[aria-describedby="tooltip-example"]');
const tooltip = document.getElementById('tooltip-example');

link.addEventListener('focus', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('blur', () => {
  tooltip.style.display = 'none';
});

link.addEventListener('mouseover', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});
            

              
                Copy
              
            
          

2. استخدام سمات ARIA

سمات ARIA ضرورية لتوفير معلومات دلالية للتقنيات المساعدة. فيما يلي تفصيل للسمات الرئيسية:

• aria-describedby: كما ذكرنا سابقًا، تنشئ هذه السمة العلاقة بين العنصر المشغل وعنصر التلميح.
• role="tooltip": تعرف هذه السمة العنصر صراحةً على أنه تلميح.
• aria-hidden="true"/aria-hidden="false": استخدم هذه السمات للإشارة إلى ما إذا كان التلميح مرئيًا حاليًا للتقنيات المساعدة. عندما يكون التلميح مخفيًا، قم بتعيين aria-hidden="true". وعندما يكون مرئيًا، قم بتعيين aria-hidden="false". هذا مهم بشكل خاص عند استخدام JavaScript للتحكم في رؤية التلميح.

مثال:

            <button aria-describedby="help-tooltip">Submit</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Click here to submit the form.</div>
            

              
                Copy
              
            
          

JavaScript (لأجل aria-hidden):

            const button = document.querySelector('button[aria-describedby="help-tooltip"]');
const tooltip = document.getElementById('help-tooltip');

button.addEventListener('focus', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('blur', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

button.addEventListener('mouseover', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('mouseout', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});
            

              
                Copy
              
            
          

3. إدارة التركيز

عندما يظهر تلميح، يجب عمومًا *ألا* يسرق التركيز من العنصر المشغل. يجب أن يظل التركيز على العنصر الذي أدى إلى ظهور التلميح. هذا يضمن أن يتمكن مستخدمو لوحة المفاتيح من متابعة تصفح الصفحة دون انقطاعات غير متوقعة.

ومع ذلك، قد تكون هناك حالات *ترغب* فيها في نقل التركيز إلى التلميح، خاصة إذا كان التلميح يحتوي على عناصر تفاعلية (مثل الروابط والأزرار). في هذه الحالة، تأكد من أن:

• التلميح مميز بصريًا للإشارة إلى أنه يحتوي على التركيز.
• هناك طريقة واضحة لإعادة التركيز إلى العنصر المشغل الأصلي (مثل زر إغلاق داخل التلميح).

في معظم الحالات، يُفضل تجنب إدارة التركيز داخل التلميح نفسه من أجل البساطة وسهولة الاستخدام.

4. ضمان التباين الكافي

تباين الألوان أمر بالغ الأهمية للقراءة. تأكد من أن لون النص في تلميحاتك له تباين كافٍ مع لون الخلفية. توصي إرشادات الوصول إلى محتوى الويب (WCAG) بنسبة تباين لا تقل عن 4.5:1 للنص العادي و 3:1 للنص الكبير (18 نقطة أو 14 نقطة بخط عريض).

استخدم أدوات فحص التباين عبر الإنترنت للتحقق من أن اختياراتك اللونية تلبي معايير إمكانية الوصول. من أمثلة أدوات فحص التباين:

• WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
• Coolors: https://coolors.co/contrast-checker

مثال (تباين جيد):

            .tooltip {
  background-color: #000;
  color: #fff;
}

            

              
                Copy
              
            
          

مثال (تباين ضعيف):

            .tooltip {
  background-color: #fff;
  color: #eee;
}

            

              
                Copy
              
            
          

5. السماح بوقت كافٍ

يحتاج المستخدمون إلى وقت كافٍ لقراءة محتوى التلميح. تجنب التلميحات التي تختفي بسرعة كبيرة. على الرغم من عدم وجود رقم سحري، استهدف عرضها لمدة لا تقل عن بضع ثوانٍ. أيضًا، يجب أن يظل التلميح مرئيًا طالما أن المستخدم يمرر فوق العنصر المشغل أو يركز عليه. إذا كنت بحاجة إلى إغلاق التلميح بسبب أحداث أخرى، فقدم مؤشرًا على أن التلميح سيغلق.

إذا كان محتوى التلميح طويلاً، ففكر في توفير طريقة للمستخدم لإغلاق التلميح يدويًا (مثل زر إغلاق أو الضغط على مفتاح Escape).

6. جعلها قابلة للإغلاق

بينما تختفي التلميحات غالبًا تلقائيًا عندما يبعد المستخدم فأرته أو يزيل التركيز، من الممارسات الجيدة توفير طريقة واضحة لإغلاقها يدويًا، خاصة للتلميحات الطويلة أو التي تحتوي على عناصر تفاعلية.

طرق إغلاق التلميحات:

• زر الإغلاق: قم بتضمين زر إغلاق بارز بصريًا داخل التلميح.
• مفتاح Escape: اسمح للمستخدمين بإغلاق التلميح بالضغط على مفتاح Escape.
• النقر في الخارج: أغلق التلميح عندما ينقر المستخدم في أي مكان خارج التلميح والعنصر المشغل. (استخدم بحذر حيث يمكن أن يكون مزعجًا).

مثال (زر الإغلاق):

            <div id="my-tooltip" role="tooltip" aria-hidden="true">
  This is my tooltip content.
  <button onclick="hideTooltip()">Close</button>
</div>
            

              
                Copy
              
            
          

مثال (مفتاح Escape):

            document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Replace with your actual hide tooltip function
  }
});

            

              
                Copy
              
            
          

7. تجنب الإفراط في الاستخدام

يجب استخدام التلميحات باعتدال وفقط عندما تقدم معلومات مفيدة حقًا. يمكن أن يؤدي الإفراط في استخدام التلميحات إلى تشويش الواجهة، وتشتيت انتباه المستخدمين، وخلق تجربة محبطة.

بدائل التلميحات:

• تسميات واضحة: استخدم تسميات واضحة ووصفية لحقول النماذج والأزرار والروابط.
• مساعدة سياقية: قدم نص المساعدة مباشرة داخل الواجهة، بالقرب من العناصر ذات الصلة.
• وثائق المساعدة: قم بالربط بوثائق مساعدة شاملة للميزات الأكثر تعقيدًا.

اعتبارات متقدمة

المحتوى الديناميكي

إذا كان محتوى التلميح الخاص بك يتم إنشاؤه ديناميكيًا (على سبيل المثال، يتم تحميله من واجهة برمجة تطبيقات أو يتم تحديثه بناءً على إدخال المستخدم)، فتأكد من تحديث سمة aria-describedby ورؤية التلميح وفقًا لذلك. استخدم JavaScript لإدارة هذه التحديثات.

تحديد الموضع

فكر بعناية في تحديد موضع التلميحات الخاصة بك. تجنب وضعها بطريقة تحجب المحتوى المهم أو تسبب تغيرات في التخطيط. كن على دراية بأحجام الشاشات والدقة المختلفة، واستخدم CSS لضمان أن تكون التلميحات مرئية دائمًا داخل منفذ العرض.

الأجهزة المحمولة

تعتمد التلميحات تقليديًا على تفاعلات التمرير، وهي غير متوفرة على الأجهزة التي تعمل باللمس. بالنسبة للأجهزة المحمولة، فكر في استخدام طرق تفاعل بديلة، مثل:

• النقر: عرض التلميح عندما ينقر المستخدم على العنصر.
• الضغط المطول: عرض التلميح عندما يضغط المستخدم مطولاً على العنصر.
• إظهار عند التركيز: العرض عندما يتلقى العنصر التركيز. يمكن تحقيق ذلك باستخدام JavaScript، والتحقق من دعم اللمس (على سبيل المثال، `('ontouchstart' in window)`) وتغيير سلوك العرض وفقًا لذلك.

اختبار التلميحات الخاصة بك

اختبر التلميحات الخاصة بك بدقة للتأكد من أنها متاحة لجميع المستخدمين. استخدم مزيجًا من الاختبار اليدوي وأدوات اختبار إمكانية الوصول الآلية.

طرق الاختبار:

• التنقل باستخدام لوحة المفاتيح: تحقق من إمكانية الوصول إلى التلميحات باستخدام لوحة المفاتيح.
• الاختبار باستخدام قارئ الشاشة: استخدم قارئ شاشة للتأكد من الإعلان عن التلميحات بشكل صحيح.
• تحليل تباين الألوان: استخدم أداة فحص تباين الألوان للتحقق من وجود تباين كافٍ.
• الاختبار على الأجهزة المحمولة: اختبر التلميحات على أجهزة محمولة وأحجام شاشات مختلفة.
• اختبار إمكانية الوصول الآلي: استخدم أدوات مثل axe DevTools أو WAVE أو Lighthouse لتحديد مشكلات إمكانية الوصول المحتملة.

التدويل (i18n) والتوطين (l10n)

عند تطوير تلميحات لجمهور عالمي، ضع التدويل والتوطين في اعتبارك:

• اتجاه النص: دعم كلاً من اتجاهات النص من اليسار إلى اليمين (LTR) ومن اليمين إلى اليسار (RTL). استخدم خصائص CSS المنطقية (مثل margin-inline-start، margin-inline-end) بدلاً من الخصائص المادية (مثل margin-left، margin-right) للتخطيط.
• الترجمات الخاصة باللغة: قدم ترجمات لمحتوى التلميح للغات المختلفة.
• تنسيقات التاريخ والوقت: قم بتكييف تنسيقات التاريخ والوقت مع الإعدادات المحلية للمستخدم.
• تنسيقات الأرقام: استخدم تنسيقات الأرقام المناسبة للمناطق المختلفة (مثل فواصل الكسور العشرية، فواصل الآلاف).

الخاتمة

يتطلب تنفيذ التلميحات التي يمكن الوصول إليها تخطيطًا دقيقًا واهتمامًا بالتفاصيل. باتباع المبادئ والتقنيات الموضحة في هذا الدليل، يمكنك إنشاء تلميحات قابلة للاستخدام من قبل الجميع، بغض النظر عن قدراتهم. تذكر أن إمكانية الوصول هي عملية مستمرة، لذا استمر في اختبار وتحسين تلميحاتك لضمان أنها تلبي احتياجات جميع المستخدمين.

المصادر

• دليل ممارسات تأليف ARIA (APG) - التلميح
• إرشادات الوصول إلى محتوى الويب (WCAG) 2.1
• وثائق MDN ويب - ARIA